<template>
  <el-dialog title="基础信息" v-model="formVisible" :close-on-click-modal="false" @close="closeDialog" width="80%">
    <el-steps class="step" :active="active" align-center :style="{ '--colors': colors }" finish-status="success">
      <el-step v-for="(item, index) in milepost" :key="index" :class="active == index + 1 ? stepActive : ''" :title="item.title" :icon="active > 1 && active - 1 > index ? 'el-icon-circle-check' : ''" />
    </el-steps>
    <el-form ref="formRef" :inline="true" :rules="rules" label-width="180">
      <!-- 步骤一 -->
      <div v-show="active == 0">
        <el-form-item label="路线编号" prop="routeCode">
          <ren-select v-model="form.routeCode" dictType="dic_route_code" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="桥类码" prop="bridgeTypeCode">
          <ren-select v-model="form.bridgeTypeCode" dictType="dic_bridge_type_code" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="顺序号" prop="sequenceNumber">
          <el-input v-model="form.sequenceNumber" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="扩充码" prop="expansionCode">
          <el-input v-model="form.expansionCode" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="路线名称" prop="routeName">
          <el-input v-model="form.routeName" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="所在地" prop="location">
          <el-popover :width="400" ref="deptListPopover" placement="bottom-start" trigger="click" popper-class="popover-pop">
            <template v-slot:reference>
              <el-input v-model="form.location" :readonly="true" placeholder="所在地">
                <template v-slot:suffix>
                  <el-icon @click.stop="deptListTreeSetDefaultHandle()" class="el-input__icon"><circle-close /></el-icon>
                </template> </el-input
            ></template>
            <div class="popover-pop-body"><el-tree :data="deptList" :props="{ label: 'label', children: 'children' }" node-key="id" ref="deptListTree" :highlight-current="true" :expand-on-click-node="false" accordion @current-change="deptListTreeCurrentChangeHandle"> </el-tree></div>
          </el-popover>
        </el-form-item>
        <el-form-item label="管养单位" prop="managementUnit">
          <ren-select v-model="form.managementUnit" dictType="cms_management_unit" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="桥梁名称" prop="bridgeName">
          <el-input v-model="form.bridgeName" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="公路局桥梁编号" prop="highwayBridgeCode">
          <el-input v-model="form.highwayBridgeCode" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="运营桩号" prop="operatingPileCode">
          <el-input v-model="form.operatingPileCode" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="施工桩号" prop="constructionPileCode">
          <el-input v-model="form.constructionPileCode" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥梁性质" prop="bridgeNature">
          <el-input v-model="form.bridgeNature" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="公路技术等级" prop="technicalLevel">
          <ren-select v-model="form.technicalLevel" dictType="cms_technical_level" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="跨越地物类型" prop="crossingFeatureTypeList">
          <ren-select-more @updateSelectMore="updateSelectMore" v-model="form.crossingFeatureTypeList"  dictType="cms_crossing_feature_type" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="跨越地物名称" prop="crossingFeatureName">

          <el-input v-model="form.crossingFeatureName" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="设计载荷等级" prop="designLoadRating">
          <el-select v-model="form.designLoadRating" class="input">
            <el-option v-for="item in lxglList" :key="item.dictValue" :value="item.dictValue">{{ item.dictLabel }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通行载重（t）" prop="passingLoad">
          <el-input v-model="form.passingLoad" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="功能类型" prop="functionalType">
          <ren-select v-model="form.functionalType" dictType="cms_functional_type" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="建成年月" prop="constructionDate">
          <el-date-picker class="input" v-model="form.constructionDate" type="month" placeholder="选择月"> </el-date-picker>
        </el-form-item>
        <el-form-item label="改建年月" prop="reconstructionDate">
           <el-date-picker class="input" v-model="form.reconstructionDate" type="month" placeholder="选择月"> 
          </el-date-picker>
         </el-form-item>
        <el-form-item label="原路名" prop="originalRoadName">
          <el-input v-model="form.originalRoadName" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="管养机构" prop="nursingAgency">
          <el-input v-model="form.nursingAgency" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="监管单位" prop="supervisionUnit">
          <el-input v-model="form.supervisionUnit" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="移交、产权等特殊情况" prop="transferProperty">
          <ren-select v-model="form.transferProperty" dictType="cms_transfer_property" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="form.longitude" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="form.latitude" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="墩台防撞设施类型" prop="pierProtectionType">
          <ren-select v-model="form.pierProtectionType" dictType="cms_pier_protection_type" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="是否互通立交" prop="isInterchange">
          <el-select v-model="form.isInterchange" class="input">
            <el-option v-for="item in yesNoList" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否宽路窄桥" prop="isWideRoadNarrowBridge">
          <el-select v-model="form.isWideRoadNarrowBridge" class="input">
            <el-option v-for="item in yesNoList" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否在长大桥梁目录" prop="isLongBridgeDirectory">
          <el-select v-model="form.isLongBridgeDirectory" class="input">
            <el-option v-for="item in yesNoList" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否有健康监测系统" prop="hasHealthMonitoringSystem">
          <el-select v-model="form.hasHealthMonitoringSystem" class="input">
            <el-option v-for="item in yesNoList" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否独柱墩" prop="isMonopile">
          <el-select v-model="form.isMonopile" class="input">
            <el-option v-for="item in yesNoList" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
      </div>

      <!-- 步骤二 -->
      <div v-show="active == 1">
        <el-form-item label="桥宽组合（m）" prop="bridgeWidthCombination">
          <el-input v-model="form.bridgeWidthCombination" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥面全宽（m）" prop="totalBridgeWidth">
          <el-input v-model="form.totalBridgeWidth" type="text" class="input"></el-input>

        </el-form-item>
        <el-form-item label="车行道宽（m）" prop="trafficLaneWidth">
          <el-input v-model="form.trafficLaneWidth" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥上净高（m）" prop="bridgeUpClearance">
          <el-input v-model="form.bridgeUpClearance" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="引道线形" prop="approachAlignment">
          <el-input v-model="form.approachAlignment" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="引道曲线半径（m）" prop="approachCurveRadius">
          <el-input v-model="form.approachCurveRadius" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="引道总宽（m）" prop="totalApproachWidth">
          <el-input v-model="form.totalApproachWidth" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="引道路面宽（m）" prop="approachRoadwayWidth">
          <el-input v-model="form.approachRoadwayWidth" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="通航等级" prop="navigableLevel">
          <el-input v-model="form.navigableLevel" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="通航净空" prop="navigableClearance		">
          <el-input v-model="form.navigableClearance" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="航道桩号" prop="pileNumber">
          <el-input v-model="form.pileNumber" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="矢跨比" prop="spanRatio">
          <el-input v-model="form.spanRatio" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="弯斜坡特征" prop="slopeGradient	">
          <el-input v-model="form.slopeGradient" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥面纵坡" prop="longitudinalGradient">
          <el-input v-model="form.longitudinalGradient" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥梁平曲线半径（m）" prop="horizontalRadius">
          <el-input v-model="form.horizontalRadius" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="角度" prop="angle">
          <el-input v-model="form.angle" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="最大横坡" prop="maxHorizontalSlope">
          <el-input v-model="form.maxHorizontalSlope" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥面中心标高（m）" prop="bridgeCenterElevation">
          <el-input v-model="form.bridgeCenterElevation" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="主桥基底标高（m）" prop="bridgeBaseElevation">
          <el-input v-model="form.bridgeBaseElevation" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥下净高（m）" prop="bridgeDownClearance">
          <el-input v-model="form.bridgeDownClearance" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="地震动峰值加速度" prop="earthquakePeakAcceleration">
          <el-input v-model="form.earthquakePeakAcceleration" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="抗震设防" prop="seismicDesign">
          <el-input v-model="form.seismicDesign" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="分隔带" prop="bridgeSeparator">
          <el-input v-model="form.bridgeSeparator" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="中央分隔带宽度（m）" prop="centralSeparatorWidth">
          <el-input v-model="form.centralSeparatorWidth" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="人行道宽度（m）" prop="pedestrianWidth">
          <el-input v-model="form.pedestrianWidth" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="中护栏等级" prop="middleFenceLevel">
          <el-input v-model="form.middleFenceLevel" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="边护栏等级" prop="sideFenceLevel">
          <el-input v-model="form.sideFenceLevel" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="护栏或防撞栏高度（m）" prop="fenceHeight">
          <el-input v-model="form.fenceHeight" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥面标准净宽（m）" prop="bridgeSurfaceWidth">
          <el-input v-model="form.bridgeSurfaceWidth" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥面实际净宽（m）" prop="bridgeActualWidth">
          <el-input v-model="form.bridgeActualWidth" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥下标准净宽（m）" prop="bridgeUnderSurfaceWidth">
          <el-input v-model="form.bridgeUnderSurfaceWidth" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥下实际净宽（m）" prop="bridgeUnderActualWidth">
          <el-input v-model="form.bridgeUnderActualWidth" type="text" class="input"></el-input>
        </el-form-item>
      </div>

      <!-- 步骤三 -->
      <div v-show="active == 2">
        <el-form-item label="设计时速（Km/h）" prop="designSpeed">
          <el-input v-model="form.designSpeed" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥台护坡" prop="bridgeEmbankment		">
          <el-input v-model="form.bridgeEmbankment" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="桥上附设" prop="bridgeSuperstructure">
          <el-input v-model="form.bridgeSuperstructure" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="通车时间" prop="openingTime">
          <el-date-picker class="input" v-model="form.openingTime" type="date" placeholder="选择日期">
           </el-date-picker>
        </el-form-item>
        <el-form-item label="收费性质" prop="feeType">
          <el-input v-model="form.feeType" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="建设单位" prop="buildingUnit">
          <el-input v-model="form.buildingUnit" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="施工单位" prop="contractor">
          <el-input v-model="form.contractor" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="监理单位" prop="constructionControlUnit">
          <el-input v-model="form.constructionControlUnit" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="第三方检测机构" prop="thirdPartyInspectionAgency">
          <el-input v-model="form.thirdPartyInspectionAgency" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="设计单位" prop="designer	">
          <el-input v-model="form.designer" type="text" class="input"></el-input>
        </el-form-item>
        <el-form-item label="开工日期" prop="startDate">
          <el-date-picker class="input" v-model="form.startDate" type="date" placeholder="选择日期"> </el-date-picker>
        </el-form-item>
        <el-form-item label="竣工日期" prop="completionDate">
          <el-date-picker class="input" v-model="form.completionDate" type="date" placeholder="选择日期"> </el-date-picker>
        </el-form-item>
      </div>

      <!-- 步骤四 -->
    </el-form>
    <template v-slot:footer>
      <div class="dialog-footer">
        <div v-if="active == 2">
          <el-button @click="stepBack" :disabled="active == 0">上一步</el-button>
          <el-button type="primary" @click="handleSure" :loading="loading">确 定</el-button>
        </div>
        <div v-else>
          <el-button @click="stepBack" :disabled="active == 0">上一步</el-button>
          <el-button type="primary" @click="stepNext">保存到下一步</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script  lang="ts">
// @ts-nocheck
import { defineComponent, onMounted, reactive, ref, watch, nextTick, getCurrentInstance, toRefs } from "vue";
import baseService from "@/service/baseService";
import RenSelect from "@/components/ren-select/src/ren-select.vue";
import RenSelectMore from "@/components/ren-select-more/src/ren-select-more.vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "basicInfoeditModal",
  props: {
    editFormVisible: {
      type: Boolean,
      default: false
    },
    editId: {
      type: String,
      default: ""
    }
  },
  components: {
    RenSelect,
    RenSelectMore
  },
  setup(props, context) {
    let formVisible = ref(false);
    let formInfoVisible = ref(false);
    let active = ref(0);
    let colors = ref("#17B3A3");
    let milepost = reactive([{ title: "行政识别信息" }, { title: "结构技术数据" }, { title: "桥梁其他信息" }]);
    let stepActive = ref("stepActive");
    let codeList = reactive(["A", "B", "C", "D"]);
    let tableList = reactive([]);
    let formInfo = reactive({});
    let locationList = reactive([]);
    let formRef = ref(null);
    const deptList = ref([]);
    const deptListPopover = ref();
    const deptListTree = ref();
    const data = reactive({ ...toRefs(locationList) });
    let form = reactive({
      routeCode: "",
      bridgeTypeCode: "",
      managementUnit: "",
      technicalLevel: "",
      functionalType: "",
      transferProperty: "",
      pierProtectionType: "",
      crossingFeatureTypeList:[]
    });
    let defaultProps = reactive({
      children: "children",
      label: "label"
    });
    let yesNoList = reactive([
      { label: "是", value: "1" },
      { label: "否", value: "0" }
    ]);
    let loading=ref(false);
    const rules = reactive({
      // routeCode: [{ required: true, message: "请选择", trigger: "change" }],
      // bridgeTypeCode: [{ required: true, message: "请选择", trigger: "change" }],
      // sequenceNumber: [{ required: true, message: "请输入", trigger: "blur" }],
      // location: [{ required: true, message: "请选择", trigger: "change" }],
      // managementUnit: [{ required: true, message: "请选择", trigger: "change" }],
      // operatingPileCode: [{ required: true, message: "请输入", trigger: "blur" }],
    });
    onMounted(() => {
      colors.value = "#17B3A3";
      getLocation();
      if (props.editId) {
        getDetail();
      } else {
        //清空
        formRef.value ? formRef?.value.resetFields() : null;
        clearTheObj(form);
      }
    });
    watch(
      () => props.editFormVisible,
      (newVal, oldVal) => {
        formVisible.value = newVal;
      }
    );
    watch(
      () => props.editId,
      (val) => {
        active.value = 0;
        if (val) {
          getDetail();
        } else {
          //清空
          formRef.value ? formRef.value.resetFields() : null;
          clearTheObj(form);
        }
      }
    );
    const getDetail = () => {
      baseService.get(`/demo/cmsbridges/${props.editId}`).then((res) => {
        Object.assign(form, res.data);
      });
    };
    //
    const getLocation = () => {
      baseService.get(`/comm/address/list?name=江苏省`).then((res) => {
        let list = JSON.stringify(res.data)
          .replace(/"id"/g, '"value"')
          .replace(/"name"/g, '"label"')
          .replace(/"cityList"/g, '"children"')
          .replace(/"countyList"/g, '"children"');

        locationList = JSON.parse(list);
        deptList.value = JSON.parse(list);
      });
    };

    const deptListTreeCurrentChangeHandle = (data: IObject) => {
      form.pid = data.id;
      form.location = data.label;
      deptListPopover.value.hide();
    };

    // 上级部门树, 设置默认值
    const deptListTreeSetDefaultHandle = () => {
      form.pid = "0";
      form.parentName = "一级部门";
    };

    const clearTheObj = (obj: Object) => {
      let emptyArr = {};
      for (let key in obj) {
        emptyArr[key] = "";
      }
      Object.assign(obj, emptyArr);
    };

    const closeDialog = () => {
      active.value=0;
      context.emit("closeModal");
      context.emit("getList");
    };
    const stepBack = () => {
      active.value = active.value - 1;
    };
    const stepNext = () => {
      active.value = active.value + 1;
    };
    const handleNodeClick = (data) => {
      console.log(data);
    };
    const toSelectFather = (e) => {
      console.log(e, "baab");
    };
    //点击  确定
    const handleSure = () => {
      loading.value=true;
      console.log(form.crossingFeatureTypeList);
      form.crossingFeatureTypeList=  !form.crossingFeatureTypeList?[]:form.crossingFeatureTypeList;
      if (props.editId) {
        baseService.put("/demo/cmsbridges", form).then((res) => {
          loading.value=false;
          if (res.code == 0) {
            closeDialog();
            ElMessage.success("操作成功");

          }
        }).catch(err=>{
          ElMessage.error(res.msg);
        })
      } else {
        baseService.post("/demo/cmsbridges", form).then((res) => {
          loading.value=false;
          if (res.code == 0) {
            closeDialog();
            ElMessage.success("操作成功");
          }
        }).catch(err=>{
          ElMessage.error(res.msg);
        })
      }
    };
    const updateSelectMore=(e)=>{
      form.crossingFeatureTypeList=e;
    }
    return {
      formVisible,
      formRef,
      closeDialog,
      active,
      colors,
      milepost,
      stepActive,
      codeList,
      rules,
      stepBack,
      stepNext,
      tableList,
      formInfo,
      formInfoVisible,
      yesNoList,
      defaultProps,
      data,
      handleNodeClick,

      toSelectFather,
      form,
      handleSure,
      deptListTreeCurrentChangeHandle,
      deptList,
      deptListPopover,
      deptListTree,
      updateSelectMore,
      loading
    };
  }
});
</script>
<style lang="scss" scoped>
.step {
  margin-bottom: 12px;
}
.input {
  width: 180px !important;
}
:deep(.el-form-item) {
  width: 340px;
}
:deep(.el-step__title) {
  font-size: 14px;
}
:deep(.el-step__title.is-process) {
  color: #17b3a3;
  font-size: 14px;
}

:deep(.el-step__head.is-process) {
  color: #17b3a3;
  border-color: #17b3a3;
}

:deep(.el-step.is-horizontal.stepActive) {
  .el-step__head.is-finish {
    .el-step__line {
      // 当前步骤数横线样式设置
      .el-step__line-inner {
        width: 100% !important;
        border-width: 1px !important;
      }
    }

    // 当前步骤数圆圈样式设置
    .el-step__icon.is-text {
      background: #17b3a3;
      color: #fff;
    }
  }
}

.input {
  width: 180px;
}
</style>